<!--
 * @Description: 邀请助力活动管理列表
 * @Author: Li Yujie
 * @Date: 2021/2/2
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2021/2/2
-->
<template>
    <div class="wrapper">
        <div class="content-wrapper">
            <!-- 筛选-->
            <div class="filter-view">
                <div class="header-new-box">
                    <el-radio-group
                        v-model="filterData.day_time"
                        size="medium"
                        @change="getTimeList"
                    >
                        <el-radio-button
                            v-for="item in dayList"
                            :key="item.value"
                            :label="item.value"
                        >
                            {{ item.label }}
                        </el-radio-button>
                    </el-radio-group>
                </div>
                <div class="header-new-box">
                    <p class="header-new-box-title">
                        活动状态
                    </p>
                    <el-select
                        v-model="filterData.active_status"
                        filterable
                        placeholder="请选择"
                        size="medium"
                        @change="handleFilterTable"
                    >
                        <el-option
                            v-for="item in statusList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="header-new-box">
                    <p class="header-new-box-title">
                        查询活动时间
                    </p>
                    <el-select
                        v-model="filterData.time_no"
                        clearable
                        filterable
                        placeholder="全部"
                        size="medium"
                        style="width: 200px"
                        @change="getTableData(1)"
                    >
                        <el-option
                            v-for="item in timeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="header-new-box">
                    <el-button
                        slot="reference"
                        type="primary"
                        size="small"
                        @click="createTimeVisible = true"
                    >
                        创建活动时间
                    </el-button>
                </div>
            </div>
            <!--/筛选-->
            <!-- table -->
            <div
                class="table-list"
                v-loading="tableLoading"
            >
                <div
                    v-for="(item,index) in tableData"
                    :key="index"
                >
                    <div class="table-header">
                        <p class="el-table-time">{{ filterData.day_time * 1000 | dateFormatter('yyyy-MM-dd') }}</p>
                        <div class="option-view">
                            {{ item.start_time * 1000 | dateFormatter('HH:mm') }} - {{ item.end_time * 1000 | dateFormatter('HH:mm') }}
                            <el-button
                                type="text"
                                size="medium"
                                style="margin-left: 12px"
                                @click="editTime(item)"
                            >
                                时间修改
                            </el-button>
                            <el-button
                                type="text"
                                size="medium"
                                style="color: #F56C6C"
                                @click="deleteTime(item)"
                            >
                                删除
                            </el-button>
                            <el-button
                                type="primary"
                                size="small"
                                style="margin-left: 12px"
                                @click="handleGoodsEdit('', 'add', item.time_no)"
                            >
                                添加内容
                            </el-button>
                        </div>
                    </div>
                    <el-table
                        :data="item.newArr"
                        class="table-data"
                        style="width: 100%;"
                        border
                    >
                        <el-table-column
                            label="序号"
                            type="index"
                            align="center"
                            width="80"
                        />
                        <el-table-column
                            prop="title"
                            label="助力标题"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            prop="aim_no"
                            label="商品/优惠券/红包编号"
                            show-overflow-tooltip
                            width="160"
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            prop="goods_cover"
                            min-width="110"
                            label="商品缩略图"
                            align="center"
                        >
                            <template slot-scope="scope">
                                <div v-if="scope.row.type === 1 && scope.row.goods_info">
                                    <img
                                        :src="scope.row.goods_info.goods_cover"
                                        class="img-cover"
                                        @click="fnShowPreview(scope.row.goods_info.goods_cover)"
                                    >
                                </div>
                                <div v-else>--</div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="goods_type"
                            label="商品类型"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        >
                            <template slot-scope="scope">
                                <div v-if="scope.row.type === 1">
                                    <span v-if="scope.row.goods_info.goods_type === 2">淘客商品</span>
                                    <span v-else-if="scope.row.goods_info.goods_type === 3">自营秒杀</span>
                                    <span v-else-if="scope.row.goods_info.goods_type === 1">自营</span>
                                    <span v-else-if="scope.row.goods_info.goods_type === 5">折扣</span>
                                    <span v-else>--</span>
                                </div>
                                <div v-if="scope.row.type === 2">优惠券</div>
                                <div v-if="scope.row.type === 3">红包</div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="price"
                            label="助力价"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            align="center"
                        >
                            <template slot-scope="scope">
                                <div v-if="scope.row.type === 1">{{ scope.row.price }}</div>
                                <div v-if="scope.row.type === 2">--</div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="goods_price_origin"
                            label="原价"
                            align="center"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                        >
                            <template slot-scope="scope">
                                <div v-if="scope.row.type === 1">{{ scope.row.goods_info ? scope.row.goods_info.goods_price : '--' }}</div>
                                <div v-if="scope.row.type === 2">--</div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="sort"
                            show-overflow-tooltip
                            label="排序"
                            align="center"
                        />
                        <!--<template slot-scope="scope">
                            <div class="sort-wrap">
                                {{ scope.row.sort }}
                                <el-button
                                    type="text"
                                    class="btn-sort"
                                    @click="handleSort(scope.row)"
                                >
                                    <i class="el-icon-edit"/>
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>-->
                        <el-table-column
                            prop="prerogative_limit"
                            label="免费领数量"
                            show-overflow-tooltip
                            :width="120"
                            :formatter="emptyFormatter"
                            align="center"
                        />
                        <el-table-column
                            prop="help_shopping_limit"
                            label="允许助力数量"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            :width="120"
                            align="center"
                        />
                        <el-table-column
                            prop="prerogative_count"
                            label="已发放免费领数量"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            :width="120"
                            align="center"
                        />
                        <el-table-column
                            prop="help_shopping_count"
                            label="发起助力次数"
                            show-overflow-tooltip
                            :width="120"
                            :formatter="emptyFormatter"
                            align="center"
                        />
                        <el-table-column
                            prop="help_shopping_success"
                            label="助力成功次数"
                            show-overflow-tooltip
                            :width="120"
                            :formatter="emptyFormatter"
                            align="center"
                        />
                        <!--<el-table-column
                            prop=""
                            label="活动助力人数"
                            show-overflow-tooltip
                            :width="120"
                            :formatter="emptyFormatter"
                            align="center"
                        />-->
                        <el-table-column
                            prop="require_help_count"
                            label="要求助力人数"
                            show-overflow-tooltip
                            :width="120"
                            align="center"
                            :formatter="emptyFormatter"
                        />
                        <el-table-column
                            label="状态"
                            show-overflow-tooltip
                            :formatter="emptyFormatter"
                            align="center"
                        >
                            <template slot-scope="scope">
                                {{ scope.row.status | statusFilter }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            :width="240"
                            fixed="right"
                        >
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    size="medium"
                                    :disabled="scope.row.status === 2"
                                    @click="handleGoodsEdit(scope.row.help_no,'edit',item.time_no)"
                                >
                                    编辑
                                </el-button>
                                <el-button
                                    type="text"
                                    size="medium"
                                    @click="showDetailDialog(scope.row.help_no)"
                                >
                                    查看详情
                                </el-button>
                                <el-button
                                    type="text"
                                    size="medium"
                                    :disabled="scope.row.status === 2"
                                    @click="deleteGoods(scope.row)"
                                >
                                    删除
                                </el-button>
                                <el-button
                                    type="text"
                                    size="medium"
                                    @click="setInvalid(scope.row)"
                                >
                                    失效
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <!-- /table -->

            <!-- 无数据 -->
            <div
                class="empty-wrap"
                v-if="!tableData.length && !tableLoading"
            >
                <div class="empty-img"/>
                <p class="empty-text">
                    暂时还没有数据哦～
                </p>
            </div>
            <!-- 无数据 -->
        </div>

        <!-- 创建活动时间弹窗 -->
        <el-dialog
            title="创建活动时间"
            :visible.sync="createTimeVisible"
            width="600px"
            :close-on-click-modal="false"
            @close="resetForm('ruleForm')"
        >
            <el-form
                :model="ruleForm"
                :rules="rules"
                label-width="100px"
                ref="ruleForm"
            >
                <el-form-item
                    label="选择日期"
                    prop="activeData"
                >
                    <el-date-picker
                        v-model="ruleForm.activeData"
                        placeholder="选择活动日期"
                        type="date"
                        size="medium"
                        style="width: 400px"
                        value-format="timestamp"
                        :picker-options="pickerOptions"
                        @change="selectActiveTime"
                    />
                </el-form-item>
                <el-form-item
                    label="选择时间"
                    prop="activeTime"
                >
                    <el-time-picker
                        is-range
                        v-model="ruleForm.activeTime"
                        size="medium"
                        :clearable="false"
                        range-separator="-"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="选择时间范围"
                        format='HH:mm'
                        value-format="timestamp"
                        style="width: 400px"
                        :disabled="!ruleForm.activeData"
                        @change="selectActiveTime"
                    />
                </el-form-item>
                <div>
                    <el-tag
                        v-for="(tag,index) in createTimeList"
                        :key="index"
                        closable
                        style="margin-left: 12px;margin-bottom: 12px"
                        @close="handleTagClose(index)"
                    >
                        {{ tag.label }}
                    </el-tag>
                </div>
                <el-form-item
                    label-width="0"
                    style="display: flex; justify-content: center;margin-bottom: 0; margin-top: 12px"
                >
                    <el-button
                        size="medium"
                        @click="resetForm('ruleForm')"
                    >
                        取消
                    </el-button>
                    <el-button
                        type="primary"
                        size="medium"
                        style="margin-left: 50px"
                        @click="createActiveTime('ruleForm')"
                    >
                        确定
                    </el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- /创建活动时间弹窗 -->

        <!-- 编辑时间弹窗 -->
        <el-dialog
            :visible.sync="editVisible"
            width="410px"
            center
            title="编辑场次时间"
            :close-on-click-modal="false"
            @close="resetEditForm"
        >
            <el-form
                :model="ruleFormEdit"
                ref="ruleFormEdit"
                :rules="rulesEdit"
                class="demo-ruleForm"
                label-width="100px"
            >
                <el-form-item
                    label="开始时间"
                    prop="start_time"
                >
                    <el-time-picker
                        placeholder="起始时间"
                        v-model="ruleFormEdit.start_time"
                        size="small"
                        value-format="HH:mm:ss"
                    />
                </el-form-item>
                <el-form-item
                    label="结束时间"
                    prop="end_time"
                >
                    <el-time-picker
                        placeholder="结束时间"
                        v-model="ruleFormEdit.end_time"
                        size="small"
                        value-format="HH:mm:ss"
                        :picker-options="{
                            minTime: ruleFormEdit.start_time
                        }"
                    />
                </el-form-item>
                <el-button
                    type="primary"
                    size="small"
                    style="margin-left: 50%; transform: translateX(-50%)"
                    @click="editTimeSubmit('ruleFormEdit')"
                >
                    保存
                </el-button>
            </el-form>
        </el-dialog>
        <!-- /编辑限时抢购 -->

        <!-- 查看详情 -->
        <el-dialog
            title="查看详情"
            width="1000px"
            :visible.sync="detailDialog"
            class="dialogPolite"
        >
            <div class="header-nav">
                <div class="header-new-box">
                    <p class="header-new-box-title">用户信息</p>
                    <el-input
                        v-model="dialogFilterData.student_keyword"
                        placeholder="请输入姓名或ID"
                        size="small"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getDialogData(1)"
                        @keyup.native.enter="getDialogData(1)"
                    />
                </div>
                <div class="header-new-box">
                    <p class="header-new-box-title">类型</p>
                    <el-select
                        v-model="dialogFilterData.is_prerogative"
                        placeholder="全部"
                        size="small"
                        @change="getDialogData(1)"
                    >
                        <el-option
                            label="全部"
                            :value="99"
                        />
                        <el-option
                            label="免费领"
                            :value="1"
                        />
                        <el-option
                            label="助力"
                            :value="0"
                        />
                    </el-select>
                </div>
                <div class="header-new-box">
                    <p class="header-new-box-title">助力状态</p>
                    <el-select
                        v-model="dialogFilterData.status"
                        placeholder="全部"
                        size="small"
                        @change="getDialogData(1)"
                    >
                        <el-option
                            label="全部"
                            :value="99"
                        />
                        <el-option
                            label="进行中"
                            :value="1"
                        />
                        <el-option
                            label="已完成"
                            :value="2"
                        />
                        <el-option
                            label="失败"
                            :value="-1"
                        />
                    </el-select>
                </div>
            </div>
            <el-table
                :data="dialogData"
                height="300"
                style="width: 100%"
                border
            >
                <el-table-column
                    prop="student_info.true_name"
                    label="姓名"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                />
                <el-table-column
                    prop="student_info.student_no"
                    label="ID"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                />
                <el-table-column
                    prop="student_info.phone"
                    label="联系方式"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                />
                <el-table-column
                    label="类型"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                >
                    <template slot-scope="scope">
                        <div v-if="scope.row.is_prerogative === 1">免费领</div>
                        <div v-if="scope.row.is_prerogative === 0">助力</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="create_time"
                    label="领取/发起助力时间"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                >
                    <template slot-scope="scope">
                        {{ scope.row.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="助力状态"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                >
                    <template slot-scope="scope">
                        <div>{{ scope.row.status | helpStatusFilter }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="student_info.school_name"
                    label="学校名称"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="center"
                />
            </el-table>
            <div
                class="pagination-wrapper clearfix"
                :style="{marginTop: '20px'}"
            >
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page.sync="dialog_page.now_page"
                    :total="dialog_page.total_count"
                    :page-size="dialog_page.page_size"
                    @current-change="getDialogData"
                />
            </div>
            <div :style="{display: 'flex', justifyContent: 'center', borderTop: '1px #eee solid'}">
                <el-button
                    size="small"
                    type="primary"
                    :style="{width: '120px', height: '32px',marginTop: '20px'}"
                    @click="detailDialog = false"
                >
                    我知道了
                </el-button>
            </div>
        </el-dialog>
        <!-- /详情弹窗 -->

        <!-- 图片预览 -->
        <img-preview ref="preview"/>
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import imgPreview from '@/components/common/img-preview';

export default {
    name: 'InvitationHelpList',
    mixins: [back],
    components: {imgPreview},
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < new Date(new Date().setHours(0, 0, 0, 0));
                }
            },
            filterData: {
                day_time: '',
                time_no: '',
                active_status: ''
            },
            // 日期列表
            dayList: [],
            // 活动时间列表
            timeList: [],
            tableData: [],
            tableDataCopy: [],
            tableLoading: true,
            // 档期状态
            statusList: [
                {label: '全部', value: ''},
                {label: '未开始', value: 0},
                {label: '进行中', value: 1},
                {label: '已结束', value: -1},
            ],
            authResult: {},
            // 编辑时间弹窗
            editVisible: false,
            // 创建活动时间弹窗
            createTimeVisible: false,
            // 新增排期表单
            ruleForm: {
                activeData: '',
                activeTime: ''
            },
            rules: {
                activeData: [
                    {required: true, message: '请选择活动日期', trigger: 'blur'}
                ],
                activeTime: [
                    {required: true, message: '请选择活动时间', trigger: 'blur'}
                ]
            },
            createTimeList: [],
            // 编辑时间表单
            ruleFormEdit: {
                start_time: '',
                end_time: '',
            },
            rulesEdit: {
                start_time: [
                    {required: true, message: '请选择时间,不可以为空', trigger: 'blur'}
                ],
                end_time: [
                    {required: true, message: '请选择时间,不可以为空', trigger: 'blur'}
                ]
            },
            help_no: '',
            // 详情筛选
            dialogFilterData: {
                student_keyword: '',
                is_prerogative: 99,
                status: 99
            },
            // 详情弹窗开关
            detailDialog: false,
            // 详情表格数据
            dialogData: [],
            // 详情分页数据
            dialog_page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            }
        };
    },
    computed: {},
    filters: {
        helpStatusFilter(val) {
            switch (val) {
                case 1:
                    return '进行中';
                case 2:
                    return '成功';
                case -1:
                    return '失败';
                default:
                    return '--';
            }
        },
        statusFilter(val) {
            switch (val) {
                case 1:
                    return '未开始';
                case 2:
                    return '进行中';
                case 3:
                    return '已结束';
                case 5:
                    return '已失效';
                case -1:
                    return '不可开始活动';
                case 4:
                    return '已售罄';
                default:
                    return '--';
            }
        }
    },
    mounted() {
        this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '商城'}, {title: '邀请助力'},{title: '活动管理'}]);
        this.authResult = this.$route.meta.authResult;
        this.getDayList();
    },

    methods: {
        /**
         * 获取最近一周日期/系统时间
         */
        getDayList() {
            this.dayList = [
                {label: this.$moment().subtract(2, 'days').format('YYYY年MM月DD日'), value: this.$moment().subtract(2, 'days').startOf('day').format('X')},
                {label: '昨天', value: this.$moment().subtract(1, 'days').startOf('day').format('X')},
                {label: '今天', value: this.$moment().startOf('day').format('X')},
                {label: '明天', value: this.$moment().add(1, 'days').startOf('day').format('X')},
                {label: this.$moment().add(2, 'days').format('YYYY年MM月DD日'), value: this.$moment().add(2, 'days').startOf('day').format('X')},
            ];

            this.filterData.day_time = this.$route.query.tab ? this.$route.query.tab : this.filterData.day_time = this.$moment().startOf('day').format('X');
            this.getTimeList();
        },

        /**
         * 获取活动时间点列表
         */
        getTimeList() {
            this.$router.push({
                query: {
                    tab: this.filterData.day_time,
                },
            });
            this.timeList = [];
            this.filterData.time_no = '';

            this.$post('/student/shop_goods_help_shopping%5Cget_simple_time_list', {
                day_time: this.filterData.day_time
            }, resp => {
                if (resp.code === 1) {
                    resp.data.list.map(item => {
                        this.timeList.push({
                            value: item.time_no,
                            label: this.$moment(item.start_time * 1000).format('HH:mm:ss') + ' - ' + this.$moment(item.end_time * 1000).format('HH:mm:ss')
                        });
                    });
                    this.getTableData();
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 获取列表数据
         * @param page
         */
        getTableData(page) {

            this.tableLoading = true;

            this.$post('/student/shop_goods_help_shopping%5Cget_list', {
                day_time: this.filterData.day_time,
                time_no: this.filterData.time_no
            }, resp => {
                if (resp.code === 1) {
                    let arr = [],
                        data = [],
                        newArr = [];

                    data.push(resp.data);
                    data.map(item => {
                        item.time_list.map((list, index) => {
                            arr.push({
                                start_time: list.start_time,
                                end_time: list.end_time,
                                time_no: list.time_no,
                                newArr: ''
                            });
                            for (let i in item.time_item_map) {

                                if (i == list.time_no) {
                                    arr[index].newArr = item.time_item_map[i];
                                }
                            }
                        });
                    });

                    arr.map((item, index) => {
                        if (item.newArr !== '') {
                            newArr.push(item);
                        }
                    });

                    this.tableDataCopy = this.tableData = newArr;
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
                this.tableLoading = false;
            });
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },
        /**
         * 创建活动时间
         * @param formName
         */
        createActiveTime(formName) {

            let indexError = 0, indexSuccess = 0;

            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let promiseList = this.createTimeList.map(item => {
                        return new Promise((resolve, reject) => {
                            this.$post('/student/shop_goods_help_shopping%5Cadd_time', {
                                start_time: item.value[0],
                                end_time: item.value[1]
                            }, resp => {
                                if (resp.code === 1) {
                                    indexSuccess++;
                                    resolve(resp);
                                } else {
                                    indexError++;
                                    reject(resp);
                                }
                            });
                        });
                    });

                    // 请求完成
                    Promise.all(promiseList).then(res => {
                        if (indexError === 0) {
                            this.$message({
                                type: 'success',
                                message: '操作成功'
                            });
                        } else {
                            this.$notify({
                                title: '提示',
                                message: `创建失败个数${indexError}个`,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                        this.createTimeVisible = false;
                        this.getTableData();
                    }).catch((res) => {
                        this.$notify({
                            title: '提示',
                            message: res.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    });
                }
            });
        },
        /**
         * 取消创建活动时间
         * @param formName
         */
        resetForm(formName) {
            this.createTimeVisible = false;
            this.createTimeList.length = 0;
            this.ruleForm.activeTime = '';
            this.ruleForm.activeData = '';
        },

        /**
         * 选择活动时间
         */
        selectActiveTime() {
            if(!this.ruleForm.activeTime) {
                return;
            }

            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    let nowTime = this.$moment().startOf('day').format('x');
                    let start = this.ruleForm.activeTime[0] + this.ruleForm.activeData - Number(nowTime);
                    let end = this.ruleForm.activeTime[1] + this.ruleForm.activeData - Number(nowTime);
                    let labelStart = this.$moment(start).format('YYYY-MM-DD HH:mm');
                    let labelEnd = this.$moment(end).format('YYYY-MM-DD HH:mm');

                    start = Number(this.$moment(labelStart).format('x'));
                    end = Number(this.$moment(labelEnd).format('x'));
                    this.createTimeList.push({
                        value: [start / 1000, end / 1000],
                        label: `${labelStart} - ${labelEnd}`
                    });

                }
            });
        },

        /**
         * 移除活动时间
         */
        handleTagClose(index) {
            this.createTimeList.splice(index, 1);
        },

        /**
         * 跳转编辑商品
         * @param no
         * @param type add 新增 edit 编辑
         * @param time_no
         */
        handleGoodsEdit(no = '', type, time_no = '') {

            this.$router.push({
                path: '/student/invitation-help-edit',
                query: {
                    no,
                    type,
                    time_no,
                    tab: this.filterData.day_time
                }
            });
        },
        /**
         * 编辑时间排期
         */
        editTime(item) {
            if(!this.authResult.auth_set_time) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.time_no = item.time_no;
            this.editVisible = true;
        },

        /**
         * 删除时间排期
         */
        deleteTime(item) {
            if(!this.authResult.auth_delete_time) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.$confirm('是否要删除当前排期', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/shop_goods_help_shopping%5Cdelete_time', {
                    time_no: item.time_no
                }, resp => {
                    if (resp.code === 1) {
                        this.getTableData();
                        this.$notify({
                            title: '提示',
                            message: '删除成功',
                            duration: 2000,
                            type: 'success'
                        });
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },
        /**
         * 排序
         */
        handleSort(row) {
            this.$prompt('修改排序', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPlaceholder: '请输入数字',
                inputErrorMessage: '请输入正整数',
                inputValue: row.sort,
                closeOnClickModal: false,
            }).then(({value}) => {
                this.$post('/student/shop_goods_help_shopping%5Cset_sort', {
                    help_no: row.help_no,
                    sort: value
                }, resp => {
                    if (resp.code === 1) {
                        this.$notify({
                            title: '提示',
                            message: '修改成功',
                            duration: 2000,
                            type: 'success'
                        });
                        this.$set(row, 'sort', value);
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },
        /**
         * 显示详情弹窗
         */
        showDetailDialog(no) {

            this.detailDialog = true;
            this.help_no = no;
            this.getDialogData(1);
        },
        /**
         * @description 获取邀请人数据
         */
        getDialogData (page) {
            let params = {...this.dialogFilterData};

            params.help_no = this.help_no;
            params.page_id = page || this.page.now_page;
            this.$post('/student/shop_goods_help_shopping%5Cget_apply_list', params, resp => {
                if (resp.code === 1) {
                    this.dialogData = resp.data.list;
                    this.dialog_page = resp.data.page;
                }
            });
        },
        /**
         * 删除商品
         */
        deleteGoods(row) {
            if(!this.authResult.auth_delete) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.$confirm('此操作将移除该商品, 是否继续?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/shop_goods_help_shopping%5Cdelete', {
                    help_no: row.help_no
                }, resp => {
                    if (resp.code === 1) {
                        this.getTableData();
                        this.$notify({
                            title: '提示',
                            message: '删除成功',
                            duration: 2000,
                            type: 'success'
                        });
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },
        /**
         * 删除商品
         */
        setInvalid(row) {
            if(!this.authResult.auth_invalid) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            this.$confirm('确定设置该助力为失效状态?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/shop_goods_help_shopping%5Cset_invalid', {
                    help_no: row.help_no
                }, resp => {
                    if (resp.code === 1) {
                        this.getTableData();
                        this.$notify({
                            title: '提示',
                            message: '设置成功',
                            duration: 2000,
                            type: 'success'
                        });
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },
        /**
         * 编辑时间提交
         * @param formName
         */
        editTimeSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {

                    let day_time = this.$moment(this.filterData.day_time * 1000).format('YYYY-MM-DD');
                    let start_time = this.$moment(`${day_time} ${this.ruleFormEdit.start_time}`).format('x');
                    let end_time = this.$moment(`${day_time} ${this.ruleFormEdit.end_time}`).format('x');

                    this.$post('/student/shop_goods_help_shopping%5Cset_time', {
                        time_no: this.time_no,
                        start_time: start_time / 1000,
                        end_time: end_time / 1000,
                    }, resp => {
                        if (resp.code === 1) {
                            this.editVisible = false;
                            this.getTableData();
                            this.$notify({
                                title: '提示',
                                message: '操作成功',
                                duration: 2000,
                                type: 'success'
                            });
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });
                }
            });
        },

        /**
         * 编辑时间弹窗关闭
         */
        resetEditForm() {
            this.ruleFormEdit.start_time = '';
            this.ruleFormEdit.end_time = '';
        },
        /**
         * 筛选活动状态
         */
        handleFilterTable() {
            let status = this.filterData.active_status;
            let now = this.$moment().format('X');

            // 全部
            if(status === '') {
                this.tableData = this.tableDataCopy;
            }
            // 未开始
            if(status === 0) {
                this.tableData = this.tableDataCopy.filter(item => {
                    return now < item.start_time;
                });
            }
            // 进行中
            if(status === 1) {
                this.tableData = this.tableDataCopy.filter(item => {
                    return now > item.start_time && now < item.end_time;
                });
            }
            // 已结束
            if(status === -1) {
                this.tableData = this.tableDataCopy.filter(item => {
                    return now > item.end_time;
                });
            }
        },
        /**
         * 预览图片
         * @param   {String}    images      //单图预览
         * @param   {Array}     images      //多图预览
         * @param index
         */
        fnShowPreview(images, index) {
            if (images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$message({
                    type: 'warning',
                    message: '图片类型错误'
                });
            }
        },
    }
};
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;

    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        padding: 12px;
        background: #fff;
        box-sizing: border-box;

        /*筛选*/

        .filter-view {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .header-new-box {
                display: flex;
                align-items: center;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                white-space: nowrap;
                margin-right: 24px;
                margin-bottom: 24px;

                &-title {
                    margin-right: 16px;
                    white-space: nowrap;
                }
            }

            .input-with-select {
                width: 300px;
                margin-right: 32px;
            }

            /deep/ .input-with-select .el-input-group__prepend {
                background-color: #fff;
                width: 130px;
            }
        }

        .table-list {
            width: 100%;
            overflow-y: auto;
            &::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }
        }

        .table-header {
            padding-top: 5px;
        }
        .option-view {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }

        .table-data {
            margin-bottom: 50px;
        }
        /deep/ .el-table__body-wrapper {
            &::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }
        }

        .curse-add {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }

        .img-cover {
            width: 60px;
            height: 60px;
        }
    }

    .empty-wrap {
        text-align: center;
        margin-top: 150px;

        .empty-img {
            width: 400px;
            height: 300px;
            margin: 0 auto;
            background-image: url(//cdn.zsdx.cn/wei/images/hire/manage/market/empty-good-list.png);
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
        }

        .empty-text {
            text-align: center;
            margin-top: 40px;
        }
    }
    .header-nav {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .header-left, .header-right {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        .header-new-box {
            display: flex;
            margin-right: 15px;
            align-items: center;
            color: #606266;
            margin-bottom: 10px;
            white-space: nowrap;
            &-title {
                margin-right: 12px;
                white-space: nowrap;
            }
        }
    }
    /* 分页 */
    .pagination-wrapper {
        padding-top: 10px;
        padding-bottom: 10px;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }

    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-textarea__inner {
        resize: none;
    }

    .dialogPolite {

    }
}
</style>

